<template>
  <view class="user_info">
    <z-nav-bar id="nav" bgColor="#ffffff" title="个人信息"></z-nav-bar>
    <view class="portrait_wrap">
      <view class="portrait" @click="chooseAndUploadImage">
        <image class="avatar" :src="userInfo.avatar" mode=""></image>
        <view class="compile flex-aj-center">
          <image src="@/static/img/my-edit.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="content_user_wrap">
      <view class="content_user">
        <view class="content_user_text">电话</view>
        <up-input
          class="mgt-20"
          placeholder="请输入内容"
          border="none"
          disabled
          v-model="userInfo.phonenumber"
          disabledColor="#fff"
          @change="change"
        ></up-input>
      </view>
      <view class="content_user">
        <view class="content_user_text">微信昵称</view>
        <up-input
          class="mgt-20"
          placeholder="请输入内容"
          border="none"
          v-model="userInfo.wxNickname"
          @change="change"
        ></up-input>
      </view>
    </view>
    <view class="bottom-btn-box">
      <main-button @click="btnClick">保存</main-button>
    </view>

  </view>
</template>

<script setup>
import { ref } from 'vue';
import {userProfile} from '../../api/pagesMy/user'
import {useCustomStores} from '@/utils/hook'
import { uploadFiles } from '@/api/index.js'
import {getInfo} from '@/api/login'
const {userStore} = useCustomStores()
const {userInfo} = userStore
// 添加图片选择和上传方法
const chooseAndUploadImage = () => {
  uni.chooseImage({
    count: 1,
    success: async (chooseImageRes) => {
      const tempFilePaths = chooseImageRes.tempFilePaths;
      console.log(tempFilePaths,'tempFilePaths')
      const { url } = await uploadFiles({ file: tempFilePaths[0] })
      userInfo.avatar = url;
    }
  });
}
const btnClick = () => {
  userProfile({
    avatar: userInfo.avatar,
    wxNickname: userInfo.wxNickname
  }).then(res=>{
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    });
    getInfo().then(res=>{
      userStore.setUserInfo({
        ...res.user
      })
    })

  })
}
</script>

<style lang="scss">
.user_info{
  min-height: 100vh;
  background-color: #ffffff;
  .portrait_wrap{
    margin-top: 200rpx;
    display: flex;
    justify-content: center;
    .portrait{
      position: relative;
      .avatar{
        width: 200rpx;
        height: 200rpx;
        background: #eee;
        border-radius: 50%;
      }
      .compile{
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        bottom: 0;
        right: 30rpx;
        border-radius: 50%;
        background-color: rgba(0, 128, 255, 0.6);
        image{
          width: 16rpx;
          height: 20rpx;
        }
      }
    }
  }
  .content_user_wrap{
    box-sizing: border-box;
    padding:  32rpx;
    width: 100%;
    .content_user{
      width: 100%;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #E5E5E5;
      .content_user_text{
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
      }
    }
  }


}

</style>
